﻿<Page
    x:Class="Animation.ClockPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Animation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="using:WinRTXamlToolkit.Controls"
    xmlns:bam="using:Brain.Animate"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    mc:Ignorable="d">
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="Clock" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>

        <Grid Grid.Row="1" >

            <bam:AnimatingTextBlock 
                x:Name="animatingTitle" 
                Text="Animating Clock" 
                HorizontalAlignment="Center"
                FontFamily="Segoe WP Light" 
                FontSize="60" >
                <bam:AnimatingTextBlock.IdleAnimation>
                    <bam:WobbleAnimation/>
                </bam:AnimatingTextBlock.IdleAnimation>
            </bam:AnimatingTextBlock>
            
            <Grid Width="400" Height="400" Margin="25" VerticalAlignment="Center">
                <Grid.Projection>
                    <PlaneProjection RotationX="-45"/>
                </Grid.Projection>

                <toolkit:RingSlice 
                    x:Name="HoursBackArc2"
                    Fill="#FF403B20"
                    InnerRadius="25" Radius="70"  
                    StartAngle="1" EndAngle="360" />

                <toolkit:RingSlice 
                    x:Name="HoursBackArc1"
                    Fill="#FF403B20"
                    InnerRadius="35" Radius="80"  
                    StartAngle="1" EndAngle="360" />

                <toolkit:RingSlice 
                    x:Name="HoursArc2"
                    Fill="#FFFFD706" 
                    InnerRadius="25" Radius="70"  
                    StartAngle="0" EndAngle="{Binding HoursDegrees, FallbackValue=180}" 
                    />
                <toolkit:RingSlice 
                    x:Name="HoursArc1"
                    Fill="#FFFFD706" 
                    InnerRadius="35" Radius="80"  
                    StartAngle="0" EndAngle="{Binding HoursDegrees, FallbackValue=180}" />

                
                <toolkit:RingSlice 
                    x:Name="MinutesBackArc2"
                    Fill="#FF40200E"
                    InnerRadius="90" Radius="130"
                    StartAngle="{Binding MinutesDegrees, FallbackValue=90}" EndAngle="360" />
                <toolkit:RingSlice 
                    x:Name="MinutesBackArc1"
                    Fill="#FF40200E"
                    InnerRadius="100" Radius="140"
                    StartAngle="{Binding MinutesDegrees, FallbackValue=90}" EndAngle="360" />

                <toolkit:RingSlice 
                    x:Name="MinutesArc2"
                    Fill="#FFF25C05"
                    InnerRadius="90" Radius="130"  
                    StartAngle="0" EndAngle="{Binding MinutesDegrees, FallbackValue=90}" />
                <toolkit:RingSlice 
                    x:Name="MinutesArc1"
                    Fill="#FFF25C05"
                    InnerRadius="100" Radius="140"  
                    StartAngle="0" EndAngle="{Binding MinutesDegrees, FallbackValue=90}" />

                
                <toolkit:RingSlice 
                    x:Name="SecondsArc"
                    Fill="#FFA62103"
                    InnerRadius="155" Radius="200"  
                    StartAngle="0" EndAngle="{Binding SecondsDegrees, FallbackValue=45}" />

            </Grid>

            <Grid VerticalAlignment="Bottom" x:Name="TimeGrid" Margin="0,0,0,35" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="65*"/>
                    <ColumnDefinition Width="35*"/>
                </Grid.ColumnDefinitions>

                <bam:AnimatingTextBlock x:Name="animatingTime" Text="{Binding TheTime}"
                                    HorizontalAlignment="Right"
                                    FontFamily="Segoe WP Light" FontSize="100" >
                    <bam:AnimatingTextBlock.InAnimation>
                        <bam:BounceAnimation/>
                    </bam:AnimatingTextBlock.InAnimation>
                </bam:AnimatingTextBlock>

                <bam:AnimatingTextBlock 
                    x:Name="animatingSeconds" Text="{Binding TheSeconds}"
                    Grid.Column="1"
                    FontFamily="Segoe WP Light" FontSize="60" Margin="10,0,0,10"
                    VerticalAlignment="Bottom" HorizontalAlignment="Left" >
                    <bam:AnimatingTextBlock.InAnimation>
                        <bam:BounceAnimation/>
                    </bam:AnimatingTextBlock.InAnimation>
                </bam:AnimatingTextBlock>

            </Grid>
        </Grid>
    </Grid>
</Page>
